<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false"
           :label-position="labelPosition">

    <!-- 其他费用 -->
    <el-card class="box-card" shadow="never">

      <div slot="header" class="header-card">
        <span class="header-card-title">理赔款支付（其他费用）</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="合计总费用:" prop="compensationPaymentTotalAmount">
            <el-input v-model="detailForm.compensationPaymentTotalAmount" v-if="isEdit"
                      disabled  v-thousand
                      placeholder="请输入合计总费用"></el-input>
            <span v-else>{{ format_thousand(detailForm.compensationPaymentTotalAmount) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-table size="mini" :data="detailForm.compensationPaymentDto" border style="width: 100%">
            <el-table-column align="center"  label="操作" width="68" v-if="isEdit"
                             fixed="right">
              <template #default="{row,$index}">
                <el-button size="mini" type="danger" @click="delThreeLoss(row, $index)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center"  label="收款方" prop="payee">
              <template #default="{row}">
                <el-form-item class="formTable">
                  <el-input v-model="row.payee" v-if=" isEdit"
                            size="mini"></el-input>
                  <span v-else>
                    {{ row.payee }}
                  </span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="收款费用">
              <template #default="{row,$index}">
                <el-input v-model="row.payAmount" v-if=" isEdit"
                          @change=" changeThreeLoss(row, $index, 'payAmount')"
                          size="mini"></el-input>
                <span v-else>
                    {{ format_thousand(row.payAmount) }}
                  </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="收账号">
              <template #default="{row}">
                <el-input v-model="row.collectionAccount" v-if=" isEdit" size="mini"></el-input>
                <span v-else>
                    {{ row.collectionAccount }}
                  </span>
              </template>
            </el-table-column>
            <template v-slot:append v-if="isEdit">
              <div class="flex-xy-center" style="height: 30px">
                <e-button type="text" icon="eel-icon-plus" @click="addDecoration">添加
                </e-button>
              </div>
            </template>
          </el-table>
        </el-col>


      </el-row>
    </el-card>

  </el-form>
</template>

<script>
export default {
  name: 'paymentClaims',//理赔款支付（其他费用）
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },

  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return 'top'
      } else {
        return 'right'
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    },
  },
  watch: {},
  data() {
    return {};
  },
  created() {
    this.handleCount()
  },
  mounted() {
  },
  methods: {
    addDecoration() {
      let obj = {
        payee: "",
        payAmount: "",
        collectionAccount: "",
      }
      this.detailForm.compensationPaymentDto.push(obj)
    },

    delThreeLoss(row,key){
      this.detailForm.compensationPaymentDto.splice(key, 1)
      this.handleCount()
    },

    changeThreeLoss(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      // if (field == "price") {
      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value
        } else {
          row[field] = ""
        }
      } else {
        row[field] = ""
      }
      this.handleCount()
    },

    handleCount() {
      let arr = this.detailForm.compensationPaymentDto
      let num = 0
      for (let i = 0; i < arr.length; i++) {
        num += Number(arr[i].payAmount)
      }
      this.value.compensationPaymentTotalAmount = num.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep.formTable {
  margin-bottom: 0;
}
</style>


